<template>
  <div class="container">
    <el-dialog
      title="预览文章"
      :visible="showDialog"
      width="42%"
      @close="CancelBtn"
    >
      <el-row>
        <h2>{{ previewList.title }}</h2>
      </el-row>
      <el-row>
        <span style="margin-left: 10px">{{ previewList.createTime | parseTime }}</span>
        <span style="margin-left: 10px">超级管理员</span>
        <span style="margin-left: 10px"
          ><i class="el-icon-view" style="margin-right: 10px"></i
          >{{ previewList.visits }}</span
        >
      </el-row>
      <el-row style="margin-top: 10px">
        <el-card
          shadow="never"
          style="background: #f5f5f5; border-top: 1px #ccc dashed"
        >
          <div v-html="previewList.articleBody"></div>
        </el-card>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
import { detail } from '@/api/hmmm/articles'
export default {
  props: {
    showDialog: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      previewList: {} // 文章详情数据
    }
  },
  methods: {
    // 预览详情
    async getArticlesDetail (id) {
      const { data } = await detail({ id })
      this.previewList = data
    },
    // 关闭弹层
    CancelBtn () {
      this.$emit('update:showDialog', false)
    }
  }
}
</script>

<style scoped lang='less'></style>
